<template>
  <div class="header">
        <el-input placeholder="请输入要搜索的名字" class="ipt" clearable :value="keyword" @input="handleinput"></el-input>
        <el-button type="primary" class="addbtn" @click="queryinfo" :disabled="!isdisabled">查询</el-button>         
        <el-button type="primary" class="addbtn" @click="addinfo">添加</el-button>
        <el-dialog
            title="添加用户"
            :visible.sync="dialogVisible"
            width="30%">
            <el-form :model="addruleForm" :rules="addrules" ref="addruleref" label-width="80px">
                    <el-form-item label="用户iD" prop="id">
                         <el-input v-model="addruleForm.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="name">
                         <el-input v-model="addruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                         <el-input v-model="addruleForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="爱好" prop="hobbys">
                      <el-checkbox-group v-model="addruleForm.hobbys">
                        <el-checkbox label="eat" name="hobbys"></el-checkbox>
                        <el-checkbox label="code" name="hobbys"></el-checkbox>
                        <el-checkbox label="play" name="hobbys"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="canlesure">取 消</el-button>
                <el-button type="primary" @click="sureaddinfo">确 定</el-button>
            </span>
        </el-dialog>
   </div>
</template>

<script>
export default {
    data() {
         //自定义年龄的校验规则
        var validatoremail = (rule,value,callback)=>{
             let reg=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/ 
            if(reg.test(value))
            return callback()
            callback(new Error("请输入合法的年龄"))
        }
        return {
             keyword:"",
             isdisabled:false,
             timer:null,
             dialogVisible:false,
             addruleForm:{
                 id:"系统自动生成",
                 name:"",
                 age:'',
                 hobbys:[]
             },
             addrules:{
                   name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                    ],
                   age: [
                        { required: true, message: '请输入用户年龄', trigger: 'blur' },
                         { validator: validatoremail,  trigger: 'blur' },
                    ],
                    hobbys: [
                         { type: 'array', required: true, message: '请至少选择一个项爱好', trigger: 'change' }
                    ],
             }
        }
    },
    methods: {
        handleinput(e){
            this.keyword = e
            if(e.trim().length>0)
            {
                this.isdisabled = true
            }
        },
        // 查询处理
        queryinfo(){
            // 简单的防抖处理
            clearTimeout(this.timer)
            this.timer = setTimeout(()=>{
                // 给父组件通知具体keyword
                this.$emit("sendkey",this.keyword)
            },1000)
        },
        // 添加处理
        addinfo(){
            this.dialogVisible = true
        },
        // 点击了取消操作
        canlesure(){
            this.$refs.addruleref.resetFields(); 
            this.dialogVisible = false
        },
        // 点击了确认添加的业务逻辑
        sureaddinfo(){
            // this.$emit("handleadduser",this.addruleForm)
            // this.dialogVisible = false
            this.$refs.addruleref.validate( valid=>{
                if(!valid)
                return 
                // 校验通过
                this.$emit("handleadduser",this.addruleForm)
                this.dialogVisible = false
                this.$refs.addruleref.resetFields(); 
                this.$message.success("添加用户成功")
                
            })
        }
    },
}
</script>

<style scoped>
 .header{
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 10px;
  }
  .header .ipt{
    width: 260px;
    margin-right: 20px;
  }
</style>